<template>
  <div class="dangerContent">
    <el-tabs v-model="activeName" @tab-click="handleClick" class="dangerList">
      <el-tab-pane label="隐患列表" name="danger"></el-tab-pane>
      <el-tab-pane label="已隐藏" name="hide"></el-tab-pane>
      <table-list ref="tableRef"></table-list>
    </el-tabs>
  </div>
</template>
<script>
import tableList from '../components/tableList'
export default {
  data () {
    return {
      activeName: 'danger'
    }
  },
  components: { tableList },
  created () {
    if (this.activeName === 'danger') {
      this.$store.commit('danger/set_isShow', 0)
    } else {
      this.$store.commit('danger/set_isShow', 1)
    }
  },
  methods: {
    handleClick (tab, event) {
      if (tab.name === 'danger') {
        this.$store.commit('danger/set_isShow', 0)
      } else {
        this.$store.commit('danger/set_isShow', 1)
      }
      this.$store.dispatch('danger/getList')
    }
  }
}
</script>
<style scoped lang="scss">
.dangerContent {
  width: 100%;
  background-color: #fff;
  border-radius: 5px;
  padding: 24px 0;
  padding-bottom: 0;
  font-size: 14px;
  color: #666666;
  min-height: calc(100% - 202px);
  .dangerList {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fff;
  }
}
</style>
<style lang="scss">
.dangerContent {
  .el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 0 0.125rem;
    border-bottom: solid 0.00833rem #f2f2f2;
    padding: 0 30px;
  }
  .el-tabs__content {
    padding: 0 30px;
  }
  .el-tabs__item {
    font-size: 18px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    margin: 6px 0 20px 0;
    padding-right: 0.66667rem;
  }
  .el-tabs__item.is-active {
    color: #4868ff;
  }
  .el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
    z-index: 1;
  }
}
</style>
